<!--
 * @Author: vectorwings
 * @Email: vectorwings@163.com
 * @GitHub: https://github.com/vector-wings/
 * @Company: Copyright 2019 HuaZhuTech, Inc.
 * @Date: 2019-10-25 10:04:13
 * @LastEditors: vectorwings
 * @LastEditTime: 2019-10-25 14:50:10
 * @Description: 任务台账-详情页面-检查记录
 -->

<template>

  <div class="card" :z-depth="1">
    <mu-container ref="container" >
      <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
        <!--<section v-for="(i,index) in problemArray" @click="details(i.id)" :key="index">-->
          <!---->
        <!--</section>-->

        <mu-paper
          class="lan-card"
          v-for="(i,index) in problemArray"
          :key = index
          @click="details(i.id)"
        >
          <section>
            <span class="tag lan-btn no-bg default" style="background-color:#FC334E;" v-if="i.checkResult == '1' ">{{'有问题'}}</span>
            <span class="tag lan-btn no-bg success" v-if="i.checkResult == '0' ">{{'无问题'}}</span>
            <div class="tag_left">
              <i  class="c-dot" v-if="i.checkResult != '0'"></i>
              <span class="tag-question" v-if="i.checkResult != '0' ">{{i.problemCount || '0'}}个问题</span>
            </div>
          </section>
          <p class="Division"></p>
          <div class="card-label-level">
            <div class="card-label-level-2">
              <span class="card-label">检查时间:</span>
              <span class="card-con">{{i.checkTime}}</span>
            </div>
            <div class="card-label-level-2">
              <span class="card-label">检查人:</span>
              <span class="card-con">{{i.checkUserName}}</span>
            </div>
            <div class="card-label-level-2">
              <span  class="card-label">检查类型:</span>
              <span  class="card-con">{{i.checkTypeName}}</span>
            </div>
          </div>

        </mu-paper>


      </mu-load-more>
    </mu-container>
  </div>

</template>

<script>
  export default {
    name: 'InspectionRecordCard',
    data () {
      return{
        refreshing: false,
        loading: false,
      }
    },
    props: {
      problemArray: Array,
    },
    methods: {
      refresh () {
        this.refreshing = true;
        this.$refs.container.scrollTop = 0;
        setTimeout(() => {
          this.refreshing = false;
          this.$emit('inspection');
        }, 2000)
      },
      load () {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.$emit('inspection');
        }, 2000)
      },
      //跳转查看详情
      details (id) {
        this.$router.push(
          {
            path: '/problemDetails',
            query: {
              info: id
            }
          });
      }
    }
  }
</script>

<style lang="scss" scoped>

  .card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #FFFFFF;

    /*padding:0.07rem;*/
    /*box-shadow:0px 2px 8px 0px rgba(182,182,182,0.4);*/
    section:nth-child(1) {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: fit-content;
    }
    section:nth-child(2) {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      height: fit-content;
    }
    .Division{
      padding:0.05rem;
      width:100%;
      border-bottom:0.01rem solid #eee;
    }
    .card-label-level{
      padding: 0.1rem 0 ;
      .card-label-level-2 {
        padding-bottom:0.05rem;
        .card-label{
          font-size:0.15rem;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(140,140,140,1);
          line-height:0.21rem;
        }
        .card-con{
          font-size:0.15rem;
          font-family:PingFangSC-Medium,PingFang SC;
          font-weight:500;
          color:rgba(61,61,61,1);
          line-height:0.21rem;
        }

      }
    }
    .tag {
      width: fit-content;
      height: fit-content;
      padding: 0.06rem;
      background-color: #389D2B;
      border-radius: 0.4rem;
      font-size: 0.12rem;
      line-height: 0.12rem;
      color: #FFFFFF;
    }
    .tag_left{
      display: flex;
      justify-items: center;
      align-items: center;

      .c-dot{
        width:0.09rem;
        height:0.08rem;
        background:rgba(252,51,78,1);
        border-radius: 50%;
      }
      .tag-question{
        padding: 0 0 0 0.05rem;
        font-size:0.13rem;
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(252,51,78,1);
        line-height:0.18rem;
      }
    }
    /*.tag-question {*/
    /*width: fit-content;*/
    /*height: fit-content;*/
    /*padding: 0.06rem;*/
    /*border: 0.01rem solid red;*/
    /*border-radius: 0.02rem;*/
    /*font-size: 0.12rem;*/
    /*line-height: 0.12rem;*/
    /*color: red;*/
    /*}*/
  }
</style>
